<template>
	<view class="detailsPage searchResults customTitleBar" :style="{borderTopWidth:statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar tabs-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<text class="tabs-item" :class="{'selected':index == tabsCurrent}" v-for="(item, index) in tabsList" :key="index" @click="tabsChange(index)">{{item.name}}</text>
		</view>
		<view class="gap"></view>
		<view class="search-bar">
			<view class="search-form">
				<input type="text" placeholder="搜索关键字查询" v-model="searchInput" confirm-type="search" @confirm="doFind">
				<view class="btn-clear" @click.stop="clearInput" v-show="searchInput !=''">清除</view>
			</view>
		</view>
		<view class="container-wrap">
			<view class="container list">
				<view class="list-item" @click="doPreviewImage(baseUrl+item.imageUrl,index)" v-for="(item, index) in bloodImageList"><image :src="baseUrl+item.imageUrl"></image></view>
				<!-- <view class="list-item"><image src="/static/img/temp/temp_03.jpg"></image></view>
				<view class="list-item"><image src="/static/img/temp/temp_03.jpg"></image></view>
				<view class="list-item"><image src="/static/img/temp/temp_02.jpg"></image></view>
				<view class="list-item"><image src="/static/img/temp/temp_03.jpg"></image></view>
				<view class="list-item"><image src="/static/img/temp/temp_02.jpg"></image></view> -->
			</view>
		</view>
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
	</view>
</template>

<script>
	import { getBloodImageList} from '@/common/api.js';
	// 引入配置
	import config from '@/common/config'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				customTitleBarBg: 'rgba(250,250,250,1)',
				statusBarHeight: statusBarHeight,
				baseUrl:null,
				tabsList:[
					{
						name: 'O性状'
					},
					{
						name: 'A性状'
					},
					{
						name: 'B性状'
					},
					{
						name: 'AB性状'
					}
				],
				tabsCurrent: 0,
				bloodImageList:[],
				bloodImageListYuanshi:[],
				searchInput:''
			}
		},
		onLoad(options) {
			this.tabsCurrent = options.id;
			this.baseUrl=config.baseUrl;
		},onShow() {
			this.getBloodImageList();
		},
		methods: {
			doPreviewImage(url,index){
				let urls=[];
				let that=this;
				this.bloodImageList.forEach(function(item, index) {
						urls.push(that.baseUrl+item.imageUrl);
				   })
				 // 预览图片
				        uni.previewImage({
				            urls: urls,
							current:index
				        });
			},clearInput(){
				this.searchInput="";
			},
			tabsChange(index) {
				this.searchInput="";
				this.tabsCurrent = index;
					this.getBloodImageList();
			},getBloodImageList(){
				let bloodType="AB";
				if(this.tabsCurrent==0){//
					bloodType="O";
				}else if(this.tabsCurrent==1){
					bloodType="A";
				}else if(this.tabsCurrent==2){
					bloodType="B";
				}else if(this.tabsCurrent==3){
					bloodType="AB";
				}
				this.bloodImageListYuanshi=[];
				this.bloodImageList=[];
				// get请求
				getBloodImageList({params:{ 'bloodType':bloodType,'searchInput':this.searchInput}}).then(data => {
					this.bloodImageListYuanshi=data;
				
						console.log(data)
					if(this.bloodImageListYuanshi.length<=10){
						this.bloodImageList=this.bloodImageListYuanshi;
						//this.bloodList_AB=[];
						this.bloodImageListYuanshi=[];
					}else{
						this.bloodImageList=this.bloodImageListYuanshi.slice(0,11);
						this.bloodImageListYuanshi=this.bloodImageListYuanshi.slice(11,this.bloodImageListYuanshi.length);
					}
				}).catch(() =>{
					
				})
			},doFind(){
				this.getBloodImageList();
			},
			toSearchResults() {
				uni.redirectTo({
					url: '../searchResults/searchResults',
				});
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toPersonalCenter() {
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				});
			},onReachBottom() {
				console.log("asdfasdf");
				console.log(this.bloodImageListYuanshi.length)
				if(this.bloodImageListYuanshi.length>=10){
						console.log(this.bloodImageListYuanshi.slice(0,10))
					this.bloodImageList=this.bloodImageList.concat(this.bloodImageListYuanshi.slice(0,10));
					this.bloodImageListYuanshi=this.bloodImageListYuanshi.slice(10,this.bloodImageListYuanshi.length);
				}else if(this.bloodImageListYuanshi.length>0&&this.bloodImageListYuanshi.length<10){
					this.bloodImageList=this.bloodImageList.concat(this.bloodImageListYuanshi);
					this.bloodImageListYuanshi=[];
				}
			}
			
		}
	}
</script>

<style>
	page{background-color: #fff;}
</style>